<template>
  <div class="app-news-page" id="news-lage">
    <h1 class="app-news-page-detail-title">{{title}}</h1>
    <div id="app-news" ref="desc" class="app-news-page-detail ql-editor" v-html="content"></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { newsApp } from "@/api/app-news.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "news-page",
  components: {},
  data() {
    //这里存放数据
    return {
      content: "",
      title: "",
      screenWidth: null
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    screenWidth(val) {},
    content(val) {}
  },
  //方法集合
  methods: {
    //$router.push({path:'/news-page',query:{name:11,list:222}})
    //用法通过vue  路由跳转 携带 query 信息到本页面 后 调用  getRouteInfo() 实现跳转
    getRouteInfo() {
      let info = this.$route.query;
      let data = {
        id: info.id,
        variety: info.variety
      };
      //let data={id:204789828775055360,variety:1}
      newsApp(data)
        .then(res => {
          let _this = this;
          if (res.code == 200) {
            this.title = res.result.title;
            this.content = res.result.content;
          }
        })
        .then(() => {
          let _this = this;
          setTimeout(function() {
            let childrenList = _this.$refs.desc.children; //获取到dom.children
            _this.$nextTick(function() {
              for (let i in childrenList) {
                let child = childrenList[i].children;
                if (child) {
                  for (let i in child) {
                    if (child[i].nodeName == "IMG") {
                      // 判断如果编辑器的html内如果有图片内容的时候，进行图片适配操作
                      let img = child[i];
                      if (img.naturalWidth > _this.screenWidth) {
                        img.style.width = "100%"; // 自适应操作 ，让图片适应当前手机样式
                      } else {
                        img.style.width = "auto"; // 自适应操作 ，让图片适应当前手机样式
                      }
                    }
                  }
                }
              }
            });
          }, 0);
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.screenWidth = document.body.clientWidth;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getRouteInfo();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {
    //     if(this.switch){
    //   this. domUp();
    //   this.switch=false
    //     }
  }, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
@import "./index.less"; //引入公共css类
</style>
<style lang="less">
#news-lage {
  img {
    width: 100%;
  }
}
</style>